<template>
  <div class="Playing">
    <div class="playingWrap">
      <div class="musicInfos">
        <div class="musicImg">
          <img v-if="currentSong.imgUrl" v-lazy="currentSong.imgUrl" />
          <img v-else v-lazy="'https://youyang-cdn.mdshuzhi.com/upload/pic_logo@2x.png'" />
        </div>
        <div class="musicRight">
          <div class="musicTitleBox">
            {{currentSong.title || '标题'}}
            <!-- <span>{{currentSong.title || '标题'}}</span> -->
            <!-- 播放列表按钮 -->
            <!-- <img v-lazy="'https://youyang-cdn.mdshuzhi.com/upload/icon_play_list@2x.png'" @click="rotaryBtn" /> -->
          </div>

          <!--<span class="goodHealth">{{currentSong.tag || '无'}}</span> rotaryBtn-->
          <!-- 按钮组 -->
          <div>
            <div class="musicContentWrap">
              <router-link class="musicContent" tag="div"
                :to="'/PopSlowSongs?id='+ categoryId+'&title='+currentSong.tag">
                <div>{{currentSong.tag || '无'}}</div>
                <div class="moreText">&gt;</div>
              </router-link>
              <span class="goodHealth" @click="introductBtn">音频简介</span>
            </div>
            <div class="musicIconBox">

              <router-link v-if="currentSong.hasVideo==1" :to="currentSong.videoLink" class="lookText">
                <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_look2@2x.png" alt="">
                <div>看</div>
              </router-link>
              <div data-id="currentSong.id" class="musicIcon" @click="seeBtn">
                <img src="../../../static/images/icon_list2@2x.png" alt="">
                <span>列表</span>
              </div>
              <div class="musicIcon" @click="collectBtn" data-rid="currentSong.id">
                <img
                  :src="(collectId)?'https://youyang-cdn.mdshuzhi.com/upload/icon_like_new@2x.png':'https://youyang-cdn.mdshuzhi.com/upload/icon_collect@2x.png'" />
                <span :style="collectId?'color:#e66d4d':''">收藏</span>
              </div>
              <div @click="shareBtn" data-id="currentSong.id" class="musicIcon">
                <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_share@2x.png" />
                <span>分享</span>
              </div>
              <router-link :to="'/Comment?rid='+currentSong.id+'&type=3'" class="musicIcon">
                <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_comments@2x.png" />
                <span>评论</span>
              </router-link>
              <a class="musicIcon" :href="currentSong.audioUrl" :download="currentSong.title" target="_blank" data-id="currentSong.id" >
                <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_download@2x.png" />
                <span>下载</span>
              </a>
            </div>
          </div>
        </div>
      </div>
      <!-- 进度条 -->
      <div class="progressBar">
        <!-- <div class="playBtn" @click="togglePlaying">
          <img
            v-lazy="play==1?'https://youyang-cdn.mdshuzhi.com/upload/icon_play4@2x.png':'https://youyang-cdn.mdshuzhi.com/upload/icon_stop4@2x.png'" />
        </div> -->
        <!-- <audio ref="audio" @timeupdate="onTimeupdate" @loadedmetadata="onLoadedmetadata" @ended="onEnded" preload="auto"
          :src="currentSong.audioUrl" controls="controls" style="display:none;"></audio> -->
        <!-- 音乐进度条 -->

        <div class="progressBarLine" @touchstart="handleTouchStart" @touchmove="handleTouchMove"
          @touchend="handleTouchEnd">
          <div class="current" :style="'width:'+percent+'%'">
            <span @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"></span>
          </div>
        </div>
        <!-- 音乐时间 -->
        <div class="musicTime">{{currentTime}}/{{currentSong.duration}}</div>
      </div>
      <!-- 歌词区域 -->
      <div style="display:flex;align-items: flex-start;">
        <!-- 音量 -->
        <div class="voice_box">
          <img src="../../../static/images/voice.png" alt="">
          <Slider v-model="voiceValue" vertical height="200px" @input="handleTouchVoice" :show-tooltip="false">
          </Slider>
        </div>
        <div class="lyric">
          <div class="lyricBox" v-if="lyric.length>0">
            <!-- 歌词 -->
            <scroller class="lyricWrap" ref="lyricList" :onTouchStart="scrollLyricStart" :onTouchMove="scrollLyric"
              :onTouchEnd="scrollLyricEnd">
              <div class="lyricEmpty"></div>
              <div v-for="(item,index) in lyric" :key="index" :ref="'lyrindex'+index" class="item"
                :id="'lyrindex'+index" :class=" currentLineNum == index ? 'current': '' ">{{item.text || (index+"XX")}}
              </div>
              <div class="lyricEmpty"></div>

            </scroller>
            <div class="line" v-if="isLyricBtn">
              <span>{{wordstime}}</span>
              <span class="orange">从这里开始播</span>
            </div>
          </div>
          <div class="lyricBox" v-else>
            <div class="empty">当前音频暂无字幕</div>
          </div>
        </div>

        <!-- 倍数 -->
        <div class="speed_box">
          <!-- <img src="../../../static/images/speed_box.png" alt=""> -->
          <div class="font">2倍</div>
          <div class="spot"></div>
          <Slider v-model="speedValue" vertical height="200px" @input="handleTouchSpeed" :min="0.5" :max="2" :step="0.5"
            :show-tooltip="true" tooltip-class="speedTooltip" :format-tooltip="formatTooltip">
          </Slider>
          <div class="spot"></div>
          <div class="font">0.5倍</div>
        </div>

      </div>

      <!-- 音乐播放器 -->
      <div class="musicPlayer">
        <!-- 滑动 -->
        <img v-lazy="'../../../static/images/pic_slide@2x.png'" class="sliding">
        <!-- 中线 -->
        <img v-lazy="'https://youyang-cdn.mdshuzhi.com/upload/tag_zhishi@2x.png'" class="lineBox" />
        <!-- 放大镜 -->
        <img v-lazy="'../../../static/images/pic_magnifier@2x.png'" class="magnifuer">
        <!-- 背景中的文字 -->
        <div class="playbgText">
          <img v-lazy="'../../../static/images/pic_slide_list@2x.png'" ref="playbgText"
            style="transform:rotate(-30deg)" />
        </div>
        <!-- 背景圆盘 -->
        <img class="playbg" v-lazy="'../../../static/images/pic_yuanpan_bg2@2x.png'" ref="playbg"
          style="transform:rotate(-30deg)" />
        <div class="lit">

          <swiper ref="playerSwiper"
            :options="{loop: true,slidesPerView: 3,slideToClickedSlide:true,centeredSlides : true,spaceBetween: 70,}"
            @setTranslate="bindtransition" @transitionEnd="bindtransitionEnd" @click.native="rotaryBtn2">
            <swiper-slide v-for="(item,index) in menuList" :key="index" >
              <div :class=" index==(menuListactive)?'item':'item'" :data-text="menuList[(index)%3].menu" ></div>
            </swiper-slide>
          </swiper>

          <!-- <mt-swipe :auto="0" :show-indicators="false" @change='musicModeChange' class="litSwiper"
            :defaultIndex="menuListactive" ref="playerSwiper">
            <mt-swipe-item  v-for="(item,index) in menuList" :key="index" data-index="index">
              <div class="playerSwiperItem">
                <div class="item " :class="index==(menuListactive)?'active':''"
                  @click="rotaryBtn2(menuList[index==0?menuList.length-1:index-1])">
                  {{menuList[index==0?menuList.length-1:index-1].menu}}</div>
                <div class="item " :class="index==(menuListactive)?'active':''" @click="rotaryBtn2(item)">{{item.menu}}
                </div>
                <div class="item " :class="index==(menuListactive)?'active':''"
                  @click="rotaryBtn2(menuList[index==menuList.length-1?0:index+1])">
                  {{menuList[index==menuList.length-1?0:index+1].menu}}</div>
              </div>
            </mt-swipe-item>
          </mt-swipe> -->
        </div>
        <div class="control">
          <!-- 切换模式 -->
          <div class="mode mode1">
            <div v-if="playMod==3" @click="changeMod">
              <img v-lazy="'https://youyang-cdn.mdshuzhi.com/upload/icon_danqu.png'" />
              <!-- <div>单曲循环</div> -->
            </div>
            <div v-if="playMod==1" @click="changeMod">
              <img v-lazy="'https://youyang-cdn.mdshuzhi.com/upload/icon_list@2x.png'" />
              <!-- <div>列表循环</div> -->
            </div>
            <div v-if="playMod==2" @click="changeMod">
              <img v-lazy="'https://youyang-cdn.mdshuzhi.com/upload/icon_suiji.png'" />
              <!-- <div>随机播放</div> -->
            </div>
          </div>
          <!-- 上下键 -->
          <div class="middle">
            <img class="prev" v-lazy="'https://youyang-cdn.mdshuzhi.com/upload/icon_last.png'"
              @click="nextPrevBtn(1)" />

            <img class="play" v-lazy="'https://youyang-cdn.mdshuzhi.com/upload/icon_play_big.png'" v-show="play==1"
              @click="togglePlaying" />
            <img class="play" v-lazy="'https://youyang-cdn.mdshuzhi.com/upload/icon_stop_big.png'" v-show="play==2"
              @click="togglePlaying" />

            <img class="next" v-lazy="'https://youyang-cdn.mdshuzhi.com/upload/icon_next.png'"
              @click="nextPrevBtn(2)" />
          </div>
          <!-- 定时 -->
          <div class="settime">
            <div class="settime" @click="pickerShow">
              <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_dingshi.png" />
              <!-- <div class="text">定时</div> -->
              <span class="time" v-if="settimebool">{{_formatTime(closetimecurrent)}}</span>
            </div>
          </div>
        </div> <!-- https://youyang-cdn.mdshuzhi.com/upload/pic_yuanpan_bg.png -->
        <!-- 播放背景 -->
      </div>

      <!-- 收藏弹出窗 -->
      <div class="collectBox" v-show="showCollectBox">
        <img src="https://youyang-cdn.mdshuzhi.com/upload/pic_collect@2x.png" />
        <span>{{collectId?'已添加到收藏':'已取消收藏'}}</span>
      </div>

      <!-- 列表弹出窗 -->
      <transition name="fade">
        <div class="listShadow" v-show="isShowPicker">
          <div class="shadow" @click="isShowPicker && cancleBtn()"></div>
          <div class="showList">
            <!-- 线条 -->
            <div class="topLineBox">
              <span class="line"></span>
            </div>
            <!-- 弹出窗内容区 -->
            <div class="contentBox">
              <!-- 音频简介 0-->
              <div class="AudioIntroduction" v-if="shadowContentId == 0">
                <span>音频简介</span>
                <div class="contentWord">
                  <scroller ref="myscroller" class="scroll">
                    {{currentSong.desc||''}}
                  </scroller>
                </div>
              </div>
              <!-- 当前播放列表 1-->
              <div class="CurrentPlayList" v-show="shadowContentId == 1">
                <!-- 显示播放条数 -->
                <div class="ListeningRecord">
                  <div class="ListeningRecordLeft">共{{playListData.totalRow}}条</div>
                </div>
                <!-- 显示全选按钮容器 -->
                <!-- <div class="ListeningRecord" v-show="isShowSelect">
                  <div class="ListeningRecordLeft multipleCheckBox" v-show="isShowSelect" @click="multipleAudioBtn">
                    <div class="selectBox">
                      <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_gouxuan@2x.png"
                        v-show="!isMultipled" />
                    </div>
                    <span>全选</span>
                  </div>
                  <div class="ListeningRecordRight">
                    <div class="listenText" style="color:#E66D4D;font-size:30px" v-show="isShowSelect"
                      @click="multipledUnsubscribeBtn">删除{{isSelected}}个已选</div>
                  </div>
                </div> -->
                <!-- 歌曲列表 -->
                <div class="musicList CurrentPlayListTop">
                  <scroller :on-infinite="infinitePlay" ref="playListScroller" class="scrollItem">
                    <div class="musicItem" v-for="(item,index) in playListData.list" :key="index"
                      :class="currentSong.id == item.id?'currentMusic':''">
                      <!-- <div class="selectBox" v-show="isShowSelect" @click="singleAudioBtn(item)">
                        <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_gouxuan@2x.png"
                          v-show="!(item.select)" />
                      </div> -->
                      <div class="musicItemBox">
                        <div class="musicItemLeft">
                          <div class="musicImg">
                            <img v-lazy="item.imgUrl" />
                          </div>
                          <div class="musicTitle">
                            <div class="musicTitleTop">
                              <div class="musicText">{{item.title}}</div>
                              <router-link to class="lookText" v-if="item.hasVideo == 1">看</router-link>
                            </div>
                            <div class="musicTitleBottom">{{item.duration}}| {{item.playCount}}人播放</div>
                          </div>
                        </div>
                        <div class="musicItemRight">
                          <div class="listenText" @click="playthis(item,-1)">听</div>
                        </div>
                      </div>
                    </div>
                  </scroller>
                </div>
              </div>
              <!-- 历史列表 推荐歌单 我的收藏 2 -->
              <div class="CurrentPlayList" v-if="shadowContentId == 2">
                <!-- 历史列表 -->
                <!-- 显示多选按钮 -->
                <div class="ListeningRecord" v-show="!isShowSelect">
                  <div class="ListeningRecordTitle">{{currentPlayListTitle}}</div>
                  <div class="historyBtnWrapRight">
                    <div class="ListeningRecordRight" style="margin-right:24rpx">
                      <div class="listenIcon">
                        <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_share@2x.png" />
                      </div>
                      <div class="listenText">分享</div>
                    </div>
                    <div class="ListeningRecordRight" @click="selectHandle" v-if="menuListactive != 1">
                      <div class="listenIcon">
                        <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_duoxuan@2x.png" />
                      </div>
                      <div class="listenText">多选</div>
                    </div>
                  </div>
                </div>
                <!-- 显示全选按钮容器 -->
                <div class="ListeningRecord" v-show="isShowSelect">
                  <div class="ListeningRecordLeft multipleCheckBox" v-show="isShowSelect" @click="multipleSelectBtn">
                    <div class="selectBox">
                      <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_gouxuan@2x.png" v-show="isMultipled" />
                    </div>
                    <span>全选</span>
                  </div>
                  <div class="ListeningRecordRight">
                    <div class="listenText" style="color:#E66D4D;font-size:30rpx" v-show="isShowSelect"
                      @click="multipledUnsubscribeBtn">删除{{isSelected}}个已选</div>
                  </div>
                </div>
                <!-- 内容区域 -->
                <div class="listContent">
                  <mt-swipe indicator-dots stopPropagation :auto="0" :defaultIndex="menuListactive"
                    @change="listContentChange" ref="listSwiper">
                    <!-- 历史列表 -->
                    <mt-swipe-item>
                      <div class="musicList">
                        <scroller :on-infinite="infinite" ref="historyScroller" class="scrollItem"
                          v-if="menuListactive==0">
                          <li class="musicItem" :class="currentSong.id == item.id?'currentMusic':''"
                            v-for="(item,index) in historyData.list" :key="index">
                            <div class="selectBox" v-show="isShowSelect" data-id="item.historyId"
                              @click="singleSelectBtn(item)">
                              <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_gouxuan@2x.png"
                                v-show="item.select" />
                            </div>
                            <div class="musicItemBox">
                              <div class="musicItemLeft">
                                <div class="musicImg">
                                  <img :src="item.imgUrl" />
                                </div>
                                <div class="musicTitle">
                                  <div class="musicTitleTop">
                                    <div class="musicText">{{item.title || '好先生'}}</div>
                                    <router-link to class="lookText" v-if="item.hasVideo == 1">看</router-link>
                                  </div>
                                  <div class="musicTitleBottom">
                                    {{item.duration || '00:00'}}|
                                    {{item.playCount || '0'}}人播放
                                  </div>
                                </div>
                              </div>
                              <div class="musicItemRight">
                                <div class="listenText" @click="playthis(item,0)" data-index="index">听</div>
                              </div>
                            </div>
                          </li>
                        </scroller>
                      </div>
                    </mt-swipe-item>

                    <mt-swipe-item>
                      <div class="musicList">
                        <scroller :on-infinite="infinite" ref="recommendScroller" class="scrollItem"
                          v-if="menuListactive==1">
                          <li class="musicItem" v-for="(item,index) in recommendData.list" :key="index"
                            :class="currentSong.id == item.id?'currentMusic':''">
                            <div class="selectBox" v-show="isShowSelect" data-id="item.historyId"
                              @click="singleSelectBtn(item)">
                              <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_gouxuan@2x.png"
                                v-show="item.select" />
                            </div>
                            <div class="musicItemBox">
                              <div class="musicItemLeft">
                                <div class="musicImg">
                                  <img :src="item.imgUrl" />
                                </div>
                                <div class="musicTitle">
                                  <div class="musicTitleTop">
                                    <div class="musicText">{{item.title || '好先生'}}</div>
                                    <router-link to class="lookText" v-if="item.hasVideo == 1">看</router-link>
                                  </div>
                                  <div class="musicTitleBottom">
                                    {{item.duration || '00:00'}}|
                                    {{item.playCount || '0'}}人播放
                                  </div>
                                </div>
                              </div>
                              <div class="musicItemRight">
                                <div class="listenText" @click="playthis(item,1)" data-index="index">听</div>
                              </div>
                            </div>
                          </li>
                        </scroller>
                      </div>
                    </mt-swipe-item>


                    <mt-swipe-item>
                      <div class="musicList">
                        <scroller :on-infinite="infinite" ref="collectionScroller" class="scrollItem"
                          v-if="menuListactive==2">
                          <li class="musicItem" v-for="(item,index) in collectionData.list" :key="index"
                            :class="currentSong.id == item.id?'currentMusic':''">
                            <div class="selectBox" v-show="isShowSelect" data-id="item.historyId"
                              @click="singleSelectBtn(item)">
                              <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_gouxuan@2x.png"
                                v-show="item.select" />
                            </div>
                            <div class="musicItemBox">
                              <div class="musicItemLeft">
                                <div class="musicImg">
                                  <img :src="item.imgUrl" />
                                </div>
                                <div class="musicTitle">
                                  <div class="musicTitleTop">
                                    <div class="musicText">{{item.title || '好先生'}}</div>
                                    <router-link to class="lookText" v-if="item.hasVideo == 1">看</router-link>
                                  </div>
                                  <div class="musicTitleBottom">
                                    {{item.duration || '00:00'}}|
                                    {{item.playCount || '0'}}人播放
                                  </div>
                                </div>
                              </div>
                              <div class="musicItemRight">
                                <div class="listenText" @click="playthis(item,2)" data-index="index">听</div>
                              </div>
                            </div>
                          </li>
                        </scroller>
                      </div>
                    </mt-swipe-item>
                  </mt-swipe>
                  <!-- 箭头按钮 -->
                  <div class="rowBox">
                    <div @click="RowBtn(1)" data-row="left" v-if="menuListactive != 0">
                      <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_left@2x.png" />
                      <span>{{menuListactive == 1?'历史听单':'推荐听单'}}</span>
                    </div>
                    <div v-else></div>
                    <div @click="RowBtn(2)" data-row="right" v-if="menuListactive != 2">
                      <span>{{menuListactive == 0?'推荐听单':'我的收藏'}}</span>
                      <img src="https://youyang-cdn.mdshuzhi.com/upload/icon_right@2x.png" />
                    </div>
                    <div v-else></div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 收起 -->
            <div @click="cancleBtn" class="cancleBtn">收起</div>
          </div>
        </div>
      </transition>
      <!-- 倒计时弹出窗 -->
      <awesome-picker ref="picker" :data="closetime" @cancel="handlePickerCancel" @confirm="handlePickerConfirm">
      </awesome-picker>

      <transition name="fade">
        <div v-if="closetimePickerShow" class="packerDialog">
          <div class="content">
            <div v-for="(item, index) in closetime" :key="index" :class="index==closetimeindex?'item on':'item'"
              @click="handlePickerConfirm(item,index)">
              <div class="name">{{item.name}}</div>
              <div class="time" v-if="item.val>0">倒计时 {{_formatTime(closetimecurrent)}}</div>
              <div class="check"></div>
            </div>
          </div>
          <div class="btn" @click="closetimePickerShow=false">取消</div>
        </div>
      </transition>

    </div>
    <div class="mask" v-if="closetimePickerShow" @click="closetimePickerShow=false"></div>

    <Footer></Footer>
  </div>
</template>

<script>
  import controller from "@/components/controllers/controllers";
  import Footer from "@/components/layer/footer";
  import {
    MessageBox,
    Toast,
  } from 'mint-ui'

  import {
    Slider
  } from 'element-ui'


  import saveAs from 'file-saver';
  var FileSaver = require('file-saver');
  var myAudio = document.getElementById("myAudio")

  const SEQUENCE_MODE = 1; //列表循环
  const RANDOM_MOD = 2; //随机循环
  const SINGLE_CYCLE_MOD = 3; // 单曲循环
  export default {
    name: "Playing",
    components: {
      Footer,
      Slider
    },
    data() {
      return {
        playListData: { //播放列表
          list: [],
          lastPage: false,
          pageNumber: 1,
          totalPage: 1,
          totalRow: 0,
        },
        historyData: { //历史听单
          list: [],
          lastPage: false,
          pageNumber: 1,
          totalPage: 1,
          totalRow: 0,
        },
        recommendData: { //推荐听单
          list: [],
          lastPage: false,
          pageNumber: 1,
          totalPage: 1,
          totalRow: 0,
        },
        collectionData: { //收藏听单
          list: [],
          lastPage: false,
          pageNumber: 1,
          totalPage: 1,
          totalRow: 0,
        },
        currentSong: {
          id: null,
          words: []
        },
        collectId: null, //收藏表id
        lyricLoop: null,
        isLyricBtn: false,
        currentLineNum: 0, //歌词高亮下标行
        currentTime: "00:00", //当前音频播放时间
        percent: 0, //进度条宽度
        voicePercent: 0, //音量高度
        wordstime: "00:00", //当前歌词位置
        isTouchProgress: false, //是否触摸滚动条

        audioId: this.$route.query.audioId || "", //  音频id
        keyword: this.$route.query.keyword || "", //  音频关键词
        categoryId: this.$route.query.categoryId || "", //	栏目id
        compilationId: this.$route.query.compilationId || "", //	合辑id
        talentUserId: this.$route.query.talentUserId || "", //	达人榜userid

        menuListactive: this.$route.query.menuListactive || 0, //音频播放控制swiper当前切换的id,0历史列表 1推荐歌单 2我的收藏


        isPlayMenuList: true, //当前播放列表是否历史列表 推荐歌单 我的收藏

        showCollectBox: false, //显示收藏弹出窗
        isShowPicker: false, //弹出窗显示
        shadowContentId: 0, //弹出窗当前内容显示id 0 音频简介 1 播放列表 2 历史歌单列表
        isShowSelect: false, //多选radio
        currentPlayListTitle: "历史听单",
        play: 1, //1是暂停，2是播放
        current: 1,
        menuList: [{
            'index': 2,
            'menu': '我的收藏'
          },
          {
            'index': 1,
            'menu': '推荐听单'
          },
          {
            'index': 0,
            'menu': '历史听单'
          }
        ], //菜单集合
        backrotate: 0,
        animationData1: {},
        startPoint: {}, //触摸开始
        dotPoint: {}, //圆点坐标
        startAngle: 0, //开始角度
        tempAngle: 0, //移动角度
        downTime: 0, //按下时间
        upTime: 0, //抬起时间
        deg: 30,

        isSelected: 0, //已选中的数量
        isMultipled: false, //是否已全选
        playMod: this.$store.state.playMod || 1,
        closetime: [{
            name: '不开启',
            val: '0',
            ischeck: false
          },
          {
            name: '15分钟后',
            val: '900',
            ischeck: false
          },
          {
            name: '30分钟后',
            val: '1800',
            ischeck: false
          },
          {
            name: '60分钟后',
            val: '3600',
            ischeck: false
          },
          {
            name: '120分钟后',
            val: '7200',
            ischeck: false
          },
          {
            name: '240分钟后',
            val: '14400',
            ischeck: false
          },
        ],
        lyric: [],
        closetimecurrent: 0,
        closetimeindex: "",
        settimebool: false,
        timeDown: null,
        timer: null,
        screenWidth: 375,
        sildercurrent: 0,
        lyricnums: 3,
        closetimePickerShow: false,
        voiceValue: 100,
        speedValue: 1,
        marks: {
          1: '0°C',
          1.5: {
            style: {
              color: '#1989FA'
            },
            label: this.$createElement('strong', '50%')
          }
        }
      };
    },
    async created() {

      // await this.initPlayList()
      this.init()
    },
    watch: {
      // "currentSong.id"() {
      //   myAudio.src = this.currentSong.audioUrl
      // },
    },
    computed: {
      playerSwiper() {
        return this.$refs.playerSwiper.swiper
      }
    },
    mounted() {
      console.log(this.$route)
      //标准模式
      if (document.compatMode == "CSS1Compat") {
        this.screenWidth = document.documentElement.clientWidth;
        //怪异模式
      } else {
        this.screenWidth = document.body.clientWidth;
      }
      if (this.screenWidth >= 1024) {
        this.screenWidth = 1024
      }

      myAudio.addEventListener('loadedmetadata', this.onLoadedmetadata, true);
      myAudio.addEventListener('timeupdate', this.onTimeupdate, true);
      myAudio.addEventListener('ended', this.onEnded, true);
      myAudio.addEventListener('pause', this.uploadListenTimes, true);
      myAudio.addEventListener('playing', this.uploadplaying, true);

    },
    destroyed() {
      myAudio.removeEventListener("loadedmetadata", this.onLoadedmetadata, true);
      myAudio.removeEventListener("timeupdate", this.onTimeupdate, true);
      myAudio.removeEventListener("ended", this.onEnded, true);
      myAudio.removeEventListener('pause', this.uploadListenTimes, true);
      myAudio.addEventListener('playing', this.uploadplaying, true);
    },
    methods: {
      async init() {
        if (!this.audioId && !this.categoryId && !this.compilationId && !this.talentUserId && !this.keyword) {
          console.log("111111")
          this.isPlayMenuList = true
          if (myAudio.paused) {
            await this.getHistoryData()
            await this.getRecommendData()
            await this.getCollectionData()
            this.initPlayList()
          } else {
            this.isPlayMenuList = false
            await this.initNowSong(myAudio.dataset.aid)
            this.playListData = {
              list: [this.currentSong],
              lastPage: true,
              pageNumber: 1,
              totalPage: 1,
              totalRow: 1,
            }
          }


        } else if (this.audioId && (this.categoryId || this.compilationId)) {
          await this.initSong(this.audioId)
          this.isPlayMenuList = false
          this.playListData = {
            list: this.$store.state.songlist ? this.$store.state.songlist : [this.currentSong],
            lastPage: true,
            pageNumber: 1,
            totalPage: 1,
            totalRow: this.$store.state.songlist ? this.$store.state.songlist.length : 1,
          }
        } else if (this.talentUserId) {
          console.log("3333333")
          await this.getTalentUserData()
        } else if (this.audioId && !this.categoryId && !this.compilationId) {
          console.log("444444")
          this.isPlayMenuList = false
          await this.initSong(this.audioId)
          this.playListData = {
            list: [this.currentSong],
            lastPage: true,
            pageNumber: 1,
            totalPage: 1,
            totalRow: 1,
          }

        }else if(this.keyword){
          this.isPlayMenuList = false
          this.playListData = {
            list: this.$store.state.songlist ? this.$store.state.songlist : [this.currentSong],
            lastPage: true,
            pageNumber: 1,
            totalPage: 1,
            totalRow: this.$store.state.songlist ? this.$store.state.songlist.length : 1,
          }
          this.initSong(this.playListData.list[0].id)
        }

      },

      async getTalentUserData() {
        let that = this;
        await controller
          .historyList({
            page: 1,
            pageSize: 999999999,
            userId: that.talentUserId
          })
          .then((res) => {
            that.playListData.list = res.baseData.list;
            that.playListData.lastPage = res.baseData.lastPage;
            that.playListData.pageNumber = res.baseData.pageNumber;
            that.playListData.totalPage = res.baseData.totalPage;
            that.playListData.totalRow = res.baseData.totalRow;
            if (res.baseData.list.length > 0) {
              that.currentSong = res.baseData.list[0]
              that.initSong(res.baseData.list[0].id)
            } else {
              MessageBox.alert('暂无数据').then(action => {
                that.$router.back()
              });
            }
          });
      },
      // 获取收听历史数据
      async getHistoryData() {
        let that = this;
        await controller
          .historyList({
            page: that.historyData.pageNumber,
          })
          .then((res) => {
            that.historyData.list = that.historyData.list.concat(res.data.baseData.list);
            that.historyData.lastPage = res.data.baseData.lastPage;
            that.historyData.pageNumber = res.data.baseData.pageNumber;
            that.historyData.totalPage = res.data.baseData.totalPage;
            that.historyData.totalRow = res.data.baseData.totalRow;
          });
      },
      // 获取推荐歌单
      async getRecommendData() {
        let that = this;
        await controller
          .audioList({
            page: that.recommendData.pageNumber,
            isRecommend: 1
          })
          .then((res) => {
            that.recommendData.list = that.recommendData.list.concat(res.baseData.list);
            that.recommendData.lastPage = res.baseData.lastPage;
            that.recommendData.pageNumber = res.baseData.pageNumber;
            that.recommendData.totalPage = res.baseData.totalPage;
            that.recommendData.totalRow = res.baseData.totalRow;
          });
      },
      // 获取我的收藏
      async getCollectionData() {
        let that = this;
        await controller
          .collectList({
            page: that.collectionData.pageNumber,
          })
          .then((res) => {
            that.collectionData.list = that.collectionData.list.concat(res.baseData.list);
            that.collectionData.lastPage = res.baseData.lastPage;
            that.collectionData.pageNumber = res.baseData.pageNumber;
            that.collectionData.totalPage = res.baseData.totalPage;
            that.collectionData.totalRow = res.baseData.totalRow;
          });
      },
      initPlayList() {
        this.isPlayMenuList = true
        if (this.historyData.list.length > 0) {
          this.playListData = this.historyData
          this.menuListactive = 0
        } else if (this.recommendData.list.length > 0) {
          this.playListData = this.recommendData
          this.menuListactive = 1
        } else if (this.collectionData.list.length > 0) {
          this.playListData = this.collectionData
          this.menuListactive = 2
        }
        if (this.playListData.list.length > 0) {
          this.initSong(this.playListData.list[0].id)
        }

      },

      //初始化音频
      async initSong(id,keyword) {
        let that = this
        that.lyric = []
        that.currentLineNum = 0
        await controller
          .audioDetail({
            audioId: id,
          })
          .then((res) => {
            that.currentSong = res.baseData;
            that.lyric = res.baseData.words ? JSON.parse(res.baseData.words) : [];
            that.currentTime = "00:00"; //当前音频播放时间
            that.percent = 0; //进度条宽度
            myAudio.src = res.baseData.audioUrl
            myAudio.dataset.aid = res.baseData.id
          });
        //检测是否点赞收藏
        await controller
          .checkCollect({
            rid: id,
            type: 3
          })
          .then((res) => {
            if(res && res.data && res.data.baseData)
            that.collectId = res.data.baseData;
          });

        // 记录播放次数
        await controller
          .play({
            audioId: id,
          })
          .then((res) => {});
        this.$updateScore(5, this.currentSong.id)
      },
      //获取正在播放的音频详情
      async initNowSong(id) {
        let that = this
        that.lyric = []
        that.currentLineNum = 0
        await controller
          .audioDetail({
            audioId: id,
          })
          .then((res) => {
            that.currentSong = res.baseData;
            that.lyric = res.baseData.words ? JSON.parse(res.baseData.words) : [];
            that.currentTime = "00:00"; //当前音频播放时间
            that.percent = 0; //进度条宽度
          });
        //检测是否点赞收藏
        await controller
          .checkCollect({
            rid: id,
            type: 3
          })
          .then((res) => {
            that.collectId = res.data.baseData;
          });
      },


      // 播放听单列表切换swiper
      async musicModeChange(e) {
        // console.log(this.playerSwiper.activeIndex)
        // this.menuListactive = (this.playerSwiper.activeIndex )
        // this.$refs.listSwiper.swipeItemCreated();
      },
      // 历史听单的swiper切换事件
      async listContentChange(e) {
        this.isShowSelect = false
        if (e == 0) {
          this.currentPlayListTitle = "历史听单"
        } else if (e == 1) {
          this.currentPlayListTitle = "推荐听单"
        } else {
          this.currentPlayListTitle = "我的收藏"
        }
        this.menuListactive = e

        this.$nextTick(() => {
          this.playerSwiper.slideTo(this.menuListactive, 1000, false)

          this.$refs.listSwiper.swipeItemCreated();
          if (e == 0) {
            this.$refs.historyScroller.finishInfinite(false)
          } else if (e == 1) {
            this.$refs.recommendScroller.finishInfinite(false)
          } else {
            this.$refs.collectionScroller.finishInfinite(false)
          }
        });

        this.playerSwiper.slideTo(this.menuListactive, 1000, false)

      },

      // 上拉加载
      infinite(done) {
        let that = this
        if (that.menuListactive == 0) {
          setTimeout(() => {
            if (that.historyData.lastPage) {
              that.$refs.historyScroller.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
            } else {
              that.historyData.pageNumber++
              that.$refs.historyScroller.finishInfinite(false)
              that.getHistoryData()
            }
          }, 1500);
        } else if (that.menuListactive == 1) {
          setTimeout(() => {
            if (that.recommendData.lastPage) {
              that.$refs.recommendScroller.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
            } else {
              that.recommendData.pageNumber++
              that.$refs.recommendScroller.finishInfinite(false)
              that.getRecommendData()
            }
          }, 1500);
        } else {
          setTimeout(() => {
            if (that.collectionData.lastPage) {
              that.$refs.collectionScroller.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
            } else {
              that.collectionData.pageNumber++
              that.$refs.collectionScroller.finishInfinite(false)
              that.getCollectionData()
            }
          }, 1500);
        }
      },
      infinitePlay(done) {
        let that = this
        setTimeout(() => {
          if (that.playListData.lastPage) {
            that.$refs.playListScroller.finishInfinite(true); //这个方法是不让它加载了，显示“没有更多数据”，要不然会一直转圈圈
          } else {
            that.playListData.pageNumber++
            that.$refs.playListScroller.finishInfinite(false)
            that.getPlayListData(this.menuListactive)
          }
        }, 1500);
      },
      async getPlayListData(type) {
        let that = this
        let res
        if (type == 0) {
          res = await controller.historyList({
            page: that.playListData.pageNumber,
          })
        } else if (type == 1) {
          res = await controller.audioList({
            page: that.playListData.pageNumber,
            isRecommend: 1
          })
        } else if (type == 2) {
          res = await controller.collectList({
            page: that.playListData.pageNumber,
          })
        }
        that.playListData.list = that.playListData.list.concat(res.data.baseData.list);
        that.playListData.lastPage = res.data.baseData.lastPage;
        that.playListData.pageNumber = res.data.baseData.pageNumber;
        that.playListData.totalPage = res.data.baseData.totalPage;
        that.playListData.totalRow = res.data.baseData.totalRow;
      },

      //列表查看
      seeBtn() {
        this.isShowPicker = !this.isShowPicker;
        this.shadowContentId = 1;
      },

      // 收藏按钮
      collectBtn() {
        let that = this
        if (that.collectId) {
          controller
            .delCollect({
              ids: that.collectId,
            })
            .then((res) => {
              that.collectId = null
              that.showCollectBox = !that.showCollectBox;
            });

        } else {
          controller
            .collect({
              rid: that.currentSong.id,
              bodyId: that.currentSong.id,
              type: 3,
              bodyType: 3,
            })
            .then((res) => {
              that.$updateScore(9)
              //检测是否点赞收藏
              controller
                .checkCollect({
                  rid: that.currentSong.id,
                  type: 3
                })
                .then((res) => {
                  that.collectId = res.data.baseData;
                  that.showCollectBox = !that.showCollectBox;
                });
            });
        }
        setTimeout(() => {
          that.showCollectBox = !that.showCollectBox;
        }, 1500);

      },
      //判断是否是微信浏览器的函数
      isWeiXin() {
        //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
        var ua = window.navigator.userAgent.toLowerCase();
        //通过正则表达式匹配ua中是否含有MicroMessenger字符串
        if (ua.match(/MicroMessenger/i) == 'micromessenger') {
          return true;
        } else {
          return false;
        }
      },
      // 下载音频
      downAudioBtn(e) {
        //判断是否在微信打开
        if (this.isWeiXin()) {
          // Toast({
          //   message: "请点击右上角在浏览器打开下载",
          //   duration: 1000,
          // });
          MessageBox.alert('请点击右上角在浏览器打开下载').then(action => {});
          return
        }
        if (!localStorage.getItem('token')) {
          this.$router.push("/login")
          return
        }
        let that = this
        controller
          .download({
            rid: that.currentSong.id,
            type: 3
          })
          .then((res) => {
            // FileSaver.saveAs(that.currentSong.audioUrl, that.currentSong.title)
            const url = that.currentSong.audioUrl
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', that.currentSong.title);
            link.setAttribute('target', "_blank");
            document.body.appendChild(link);
            link.click();
            link.remove();
          });
      },
      // 进度条事件
      handleTouchStart(e) {
        this.isTouchProgress = true
        this.percent = ((e.touches[0].clientX - ((window.innerWidth / 750) * 80)) / ((window.innerWidth / 750) * 506)) *
          100
        this.currentTime = this._formatTime((this.percent / 100) * this._formatSecod(this.currentSong.duration))
      },
      // 滑动进度条
      handleTouchMove(e) {
        // 进度条506px
        if (e.touches[0].clientX < ((window.innerWidth / 750) * 80)) {
          this.percent = 0
        } else if (e.touches[0].clientX > ((window.innerWidth / 750) * 586)) {
          this.percent = 100
        } else {
          this.percent = ((e.touches[0].clientX - ((window.innerWidth / 750) * 80)) / ((window.innerWidth / 750) *
            506)) * 100
        }
        this.currentTime = this._formatTime((this.percent / 100) * this._formatSecod(this.currentSong.duration))
      },
      handleTouchEnd() {
        myAudio.currentTime = this._formatSecod(this.currentTime)
        myAudio.play()
        this.play = 2
        this.isTouchProgress = false
      },

      _formatSecod(time) {
        time = time || 0
        if (typeof time == 'string') {
          var min = time.split(':')[0];
          var sec = time.split(':')[1];
          var s = Number(min * 60) + Number(sec);
        }
        return s
      },
      _formatTime(interval) {
        interval = interval | 0
        const minute = interval / 60 | 0
        const second = this._pad(interval % 60)
        return `${minute}:${second}`
      },
      /*秒前边加0*/
      _pad(num, n = 2) {
        let len = num.toString().length
        while (len < n) {
          num = '0' + num
          len++
        }
        return num
      },



      //播放更新进度条
      onTimeupdate() {
        if (myAudio.duration != NaN && myAudio.duration != undefined) {
          if(myAudio.paused){
            this.play=1
          }else{
            this.play=2
          }
          if (!this.isTouchProgress) {
            this.currentTime = this._formatTime(myAudio.currentTime)
            this.percent = (myAudio.currentTime / myAudio.duration) * 100
          }
          for (const i in this.lyric) {
            if (i > 0 && this._formatSecod(this.currentTime) < this._formatSecod(this.lyric[i].time)) {
              this.currentLineNum = parseInt(i - 1)
              break
            }
          }
          if(this.$refs.lyricList){
            this.$refs.lyricList.scrollTo(0, (this.$refs[('lyrindex' + this.currentLineNum)][0].offsetTop - 120), true)
          }
        }
      },
      //获取时长
      onLoadedmetadata() {
        this.currentSong.duration = this._formatTime(myAudio.duration)
      },
      onEnded() {
        controller
          .uploadListenTimes({
            seconds: parseInt(myAudio.currentTime)
          })
          .then((res) => {});
        if (this.playMod == SINGLE_CYCLE_MOD) {
          myAudio.load()
        } else {
          this.nextPrevBtn(2)
        }
      },
      uploadplaying(e){

      },

      scrollLyric() {
        clearTimeout(this.lyricLoop); //再次清空定时器，防止重复注册定时器
        let index = 0
        for (const i in this.lyric) {
          if (this.$refs.lyricList.getPosition().top < this.$refs[('lyrindex' + i)][0].offsetTop - 90) {
            index = i
            break
          }
        }
        this.wordstime = this.lyric[index].time

      },
      scrollLyricStart() {
        let that = this
        clearTimeout(that.lyricLoop); //再次清空定时器，防止重复注册定时器
        that.lyricLoop = setTimeout(() => {
          that.isLyricBtn = true
          let index = 0
          for (const i in this.lyric) {
            if (this.$refs.lyricList.getPosition().top < this.$refs[('lyrindex' + i)][0].offsetTop - 90) {
              index = i
              break
            }
          }
          this.wordstime = this.lyric[index].time
        }, 500);
      },
      scrollLyricEnd() {
        let that = this
        clearTimeout(that.lyricLoop); //清空定时器，防止重复注册定时器
        if (that.isLyricBtn) {
          let index = 0
          for (const i in that.lyric) {
            if (that.$refs.lyricList.getPosition().top < that.$refs[('lyrindex' + i)][0].offsetTop - 90) {
              index = parseInt(i)+1
              break
            }
          }
          that.currentLineNum = index
          that.currentTime = that.lyric[that.currentLineNum].time
          myAudio.currentTime = that._formatSecod(that.currentTime)
          myAudio.play()
          that.play = 2
        }
        that.isLyricBtn = false
      },
      //   简介
      introductBtn() {
        this.isShowPicker = !this.isShowPicker;
        this.shadowContentId = 0;
      },
      //播放列表按钮
      async rotaryBtn() {
        this.isShowPicker = !this.isShowPicker;
        this.shadowContentId = 1;
      },
      // 下面的历史列表 推荐歌单 我的收藏
      async rotaryBtn2(e) {
        this.isShowPicker = !this.isShowPicker;
        this.shadowContentId = 1;
        let indexData = {
          历史听单: 0,
          推荐听单: 1,
          我的收藏: 2
        }
        let data = {
          index: indexData[e.target.dataset.text]
        }
        this.historyData = { //历史听单
          list: [],
          lastPage: false,
          pageNumber: 1,
          totalPage: 1,
          totalRow: 0,
        }
        this.recommendData = { //推荐听单
          list: [],
          lastPage: false,
          pageNumber: 1,
          totalPage: 1,
          totalRow: 0,
        }
        this.collectionData = { //收藏听单
          list: [],
          lastPage: false,
          pageNumber: 1,
          totalPage: 1,
          totalRow: 0,
        }
        await this.getHistoryData()
        await this.getRecommendData()
        await this.getCollectionData()
        // this.menuListactive = data.index
        if (data.index == 0) {
          this.currentPlayListTitle = "历史听单"
        } else if (data.index == 1) {
          this.currentPlayListTitle = "推荐听单"
        } else {
          this.currentPlayListTitle = "我的收藏"
        }

        // this.isShowPicker = !this.isShowPicker;
        this.shadowContentId = 2;
        this.$nextTick(() => {
          // this.playerSwiper.slideTo(this.menuListactive, 1000, false)

          this.$refs.listSwiper.swipeItemCreated();
          if (data.index == 0) {
            if(this.$refs.historyScroller)
            this.$refs.historyScroller.finishInfinite(false)
          } else if (data.index == 1) {
            if(this.$refs.recommendScroller)
            this.$refs.recommendScroller.finishInfinite(false)
          } else {
            if(this.$refs.collectionScroller)
            this.$refs.collectionScroller.finishInfinite(false)
          }
        });
      },
      cancleBtn() {
        this.isShowSelect = false
        this.isShowPicker = false;
      },

      // 分享按钮
      shareBtn(e) {
        this.$Share(this.currentSong.id, 3, this.currentSong.title, this.currentSong.imgUrl,this.$route.path+"?audioId="+this.currentSong.id);
      },

      // 播放按钮
      togglePlaying() {
        console.log(myAudio)
        if (this.play == 1) {
          myAudio.play()
        } else {
          myAudio.pause()
        }
        this.play = this.play == 1 ? '2' : '1'
      },

      uploadListenTimes() {
        controller
          .uploadListenTimes({
            seconds: parseInt(myAudio.currentTime)
          })
          .then((res) => {});
      },
      async playthis(data, type) {
        if (type == 0) {
          this.isPlayMenuList = true
          this.menuListactive = type
          this.playListData = this.historyData
        } else if (type == 1) {
          this.isPlayMenuList = true
          this.menuListactive = type
          this.playListData = this.recommendData
        } else if (type == 2) {
          this.isPlayMenuList = true
          this.menuListactive = type
          this.playListData = this.collectionData
        }
        let that = this
        myAudio.pause()
        await that.initSong(data.id)
        myAudio.load()
        myAudio.oncanplay = function () {
          myAudio.play()
        }
        that.play = 2
        this.isShowPicker = false;
      },
      pickerShow() {
        // this.$refs.picker.show();
        this.closetimePickerShow = true
      },
      // Picker取消
      handlePickerCancel() {
        console.log("Picker取消");
      },
      // Picker确定
      handlePickerConfirm(item, index) {
        let that = this
        that.settimebool = true
        that.closetimeindex = index
        that.closetimecurrent = Number(item.val)
        clearInterval(that.timeDown)
        that.timeDown = setInterval(() => {
          if (that.closetimecurrent == 0) {
            myAudio.pause()
            that.play = 1
            that.settimebool = false
            that.closetimecurrent = 0
            clearInterval(that.timeDown)
          }
          that.closetimecurrent--
        }, 1000);
      },

      RowBtn(type) {
        // type 1左下角，2右下角
        if (type == 1) {
          this.menuListactive--
          this.$refs.listSwiper.prev();
        } else {
          this.menuListactive++
          this.$refs.listSwiper.next();
        }
      },
      changeMod() {
        console.log("切换模式");
        let playMod = this.playMod + 1;
        if (playMod > SINGLE_CYCLE_MOD) {
          playMod = SEQUENCE_MODE;
        }
        this.playMod = playMod;
      },

      async nextPrevBtn(type) {
        // type 1上一首，2下一首
        let that = this
        console.log(this.playListData.list)
        if (this.playMod == RANDOM_MOD) {
          this.randomPlay()
        } else {
          let index = 0
          for (const i in this.playListData.list) {
            if (this.currentSong.id == this.playListData.list[i].id) {
              if (type == 2) {
                this.play = 2
                index = (parseInt(i) + 1 == this.playListData.list.length ? 0 : parseInt(i) + 1)
              } else {
                this.play = 2
                index = (parseInt(i) == 0 ? this.playListData.list.length - 1 : parseInt(i) - 1)
              }
            }
          }
          console.log(index)
          myAudio.pause()
          await that.initSong(that.playListData.list[index].id)
          myAudio.load()
          myAudio.oncanplay = function () {
            myAudio.play()
            that.play == 2
          }
        }


        this.isShowPicker = false;
      },

      async randomPlay() {
        let that = this
        if (this.isPlayMenuList) {
          let page = Math.floor((Math.random() * this.playListData.totalPage) + 1)
          let that = this
          let res
          if (this.menuListactive == 0) {
            res = await controller.historyList({
              page: page,
            })
          } else if (this.menuListactive == 1) {
            res = await controller.audioList({
              page: page,
              isRecommend: 1
            })
          } else if (this.menuListactive == 2) {
            res = await controller.collectList({
              page: page,
            })
          }
          let data = res.baseData.list[Math.floor((Math.random() * res.baseData.list.length - 1) + 1)]

          myAudio.pause()
          await that.initSong(data.id)
          myAudio.load()
          myAudio.oncanplay = function () {
            myAudio.play()
            that.play == 2
          }
        } else {
          let data = this.playListData.list[Math.floor((Math.random() * this.playListData.list.length - 1) +
            1)]
          myAudio.pause()
          await that.initSong(data.id)
          myAudio.load()
          myAudio.oncanplay = function () {
            myAudio.play()
            that.play == 2
          }
        }
      },

      // 转盘转动(ing)
      bindtransition(swiper, translate) {
        let dx = swiper;
        this.backrotate = Math.floor(dx / this.screenWidth * 3);
        // console.log("bindtransition",this.backrotate)
        this.$refs.playbg.style.transform = "rotate(" + (this.backrotate * 30 - 30) + "deg)";
        this.$refs.playbgText.style.transform = "rotate(" + (this.backrotate * 30 - 30) + "deg)";
      },
      bindtransitionEnd() {
        this.backrotate = Math.round(this.backrotate);
        // console.log("bindtransitionEnd",this.backrotate)
        this.$refs.playbg.style.transform = "rotate(" + (this.backrotate * 30 - 30) + "deg)";
        this.$refs.playbgText.style.transform = "rotate(" + (this.backrotate * 30 - 30) + "deg)";
      },
      // 转盘转动(ed)
      bindanimationfinish(e) {
        // if (this.timer) {
        //   clearTimeout(this.timer)
        //   this.timer = null;
        // }
        // let backrotate = this.backrotate;
        // this.backrotate = backrotate + Math.round(this.temporaryBackrotate)
        //   this.temporaryBackrotate = 0
      },
      multipleAudioBtn() {
        //不需要
        console.log("全选")
      },
      singleAudioBtn(item) {
        //不需要
      },
      multipledUnsubscribeBtn() {
        if (this.menuListactive == 0) { //移出历史
          this.deleteHistory()
        } else if (this.menuListactive == 2) { //取消收藏
          this.deleteRecommend()
        }
      },
      deleteHistory() {
        let that = this
        let ids = []
        for (const i of this.historyData.list) {
          if (i.select) {
            ids.push(i.id)
          }
        }
        controller
          .removeHistory({
            ids: ids.join(","),
          })
          .then((res) => {
            that.$refs.historyScroller.finishInfinite(false)
            that.historyData = {
              list: [],
              lastPage: false,
              pageNumber: 1,
              totalPage: 1,
              totalRow: 0,
            }
            that.getHistoryData()
          });
      },
      deleteRecommend() {
        let that = this
        let ids = []
        for (const i of this.collectionData.list) {
          if (i.select) {
            ids.push(i.rid + '-' + i.type + '-' + i.id)
          }
        }
        controller
          .delPlayCollect({
            ids: ids.join(","),
          })
          .then((res) => {
            that.$refs.collectionScroller.finishInfinite(false)
            that.collectionData = {
              list: [],
              lastPage: false,
              pageNumber: 1,
              totalPage: 1,
              totalRow: 0,
            }
            that.getCollectionData()
          });
      },
      selectHandle() {
        this.isShowSelect = !this.isShowSelect
      },
      multipleSelectBtn() {
        this.isMultipled = !this.isMultipled
        if (this.menuListactive == 0) {
          this.isSelected = this.isMultipled ? this.historyData.list.length : 0
          for (const i of this.historyData.list) {
            this.$set(i, 'select', this.isMultipled)
          }
        } else if (this.menuListactive == 1) {
          this.isSelected = this.isMultipled ? this.recommendData.list.length : 0
          for (const i of this.recommendData.list) {
            this.$set(i, 'select', this.isMultipled)
          }
        } else if (this.menuListactive == 2) {
          this.isSelected = this.isMultipled ? this.collectionData.list.length : 0
          for (const i of this.collectionData.list) {
            this.$set(i, 'select', this.isMultipled)
          }
        }
      },

      singleSelectBtn(item) {
        this.$set(item, 'select', !item.select)
        item.select ? this.isSelected++ : this.isSelected--
      },
      // 音量进度条事件
      handleTouchVoice() {
        myAudio.volume = (this.voiceValue / 100)
      },
      // 音量倍速条事件
      handleTouchSpeed() {
        console.log(this.speedValue)
        myAudio.playbackRate = (this.speedValue)
      },
      formatTooltip() {
        return "x" + this.speedValue.toFixed(1)
      }
    },
  };

</script>
<style lang='scss' scoped>
*{
  -webkit-user-select:none; -webkit-touch-callout:none;
}
  .playingWrap {
    .musicInfos {
      width: 750px;
      padding: 0 32px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      margin: 40px auto 0;

      .musicRight {
        width: 412px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        /* 音乐标题 */
        .musicTitleBox {
          width: 100%;
          position: relative;
          font-size: 40px;
          max-height: 132px;
          overflow: hidden;
          color: #333333;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
          display: -webkit-box;
          /* ! autoprefixer: off */
            -webkit-box-orient: vertical;
          /* autoprefixer: on */



          img {
            width: 100px;
            height: 32px;
            float: right;
            background: #fff;
          }
        }

        /* 音频描述 */
        .musicContentWrap {
          display: flex;
          align-items: center;
          margin-top: 10px;
          margin-bottom: 10px;

          /* 养生之道 */
          .goodHealth {
            width: 112px;
            height: 32px;
            border: 1px solid #999999;
            color: #999999;
            border-radius: 4px;
            display: inline-block;
            line-height: 32px;
            font-size: 18px;
            text-align: center;
            margin-left: 20px;
          }
        }

        .musicContent {
          line-height: 36px;
          display: -webkit-box;
          /* ! autoprefixer: off */
            -webkit-box-orient: vertical;
          /* autoprefixer: on */
          -webkit-line-clamp: 2;
          overflow: hidden;
          color: #e66d4d;
          font-size: 24px;
          position: relative;
          display: flex;

          .moreText {
            margin-left: 5px;
            color: #e66d4d;
            background-color: #fff;
          }
        }
      }

      /* 五个图标 */
      .musicIconBox {
        width: 100%;
        height: 66px;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .lookText {
          display: flex;
          align-items: center;
          flex-direction: column;
          font-size: 0.266667rem;
          color: #999999;

          img {
            width: 0.48rem;
            height: 0.48rem;
          }
        }
      }

      .musicIcon {
        display: flex;
        align-items: center;
        flex-direction: column;
        position: relative;

        .shareBtn {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: transparent;

          &::after {
            border: none;
          }
        }

        img {
          width: 36px;
          height: 36px;
        }

        span {
          font-size: 20px;
          color: #999999;
        }
      }
    }

    .musicInfos .musicImg,
    .musicImg img {
      width: 250px;
      height: 250px;
      border-radius: 8px;
      overflow: hidden;
    }

    /* 进度条 */
    .progressBar {
      width: 100%;
      height: 10px;
      margin: 40px auto;
      padding: 0 50px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;

      /* 正在播放状态 */
      .playBtn,
      .playBtn img {
        width: 32px;
        height: 32px;
        display: block;
      }

      /* 进度条 */
      .progressBarLine {
        width: 506px;
        height: 100%;
        margin: 0 16px;
        position: relative;
        background-color: rgba(230, 109, 77, 0.4);
        /* background: url(https://youyang-cdn.mdshuzhi.com/upload/pic_kedu_n.png) no-repeat center center; */
        /* background-size: 100%; */
        border-radius: 10px;

        .current {
          position: absolute;
          z-index: 2;
          left: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          height: 10px;
          background: rgba(230, 109, 77, 0.85);
          border-radius: 4px;
          width: 0%;

          span {
            content: "";
            display: block;
            position: absolute;
            right: -8px;
            top: 0;
            bottom: 0;
            /* width: 6px;
            height: 100%; */
            width: 15px;
            height: 15px;
            margin: auto;
            border-radius: 50%;
            margin: auto;
            background: linear-gradient(45deg,
                rgba(246, 80, 80, 1),
                rgba(240, 116, 96, 1));
          }
        }

        img {
          width: 100%;
          height: 100%;
        }

        /* 音乐时间 */
        .musicTime {
          font-size: 20px;
          color: #333333;
        }
      }
    }

    /* 收藏弹出窗 */
    .collectBox {
      width: 248px;
      height: 196px;
      border-radius: 16px;
      background: rgba(0, 0, 0, 1);
      opacity: 0.8;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-124px, -83px);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      z-index: 9999;

      img {
        width: 65px;
        height: 61px;
      }

      span {
        font-size: 30px;
        color: #fff;
        margin-top: 34px;
      }
    }

    /* 列表弹出窗 */
    .listShadow {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      margin: 0 auto;
      height: 100%;
      z-index: 99999;
      min-width: 640px;
      max-width: 960px;
      .shadow{
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.32);
        z-index: 99998;
      }
      .showList {
        min-width: 640px;
        max-width: 960px;
        width: 750px;
        height: 80%;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 32px 32px 0 0;
        background-color: #fff;
        z-index: 999;

        //   横线
        .topLineBox {
          width: 100%;
          height: 57px;
          display: flex;
          justify-content: center;
          align-items: center;

          .line {
            display: inline-block;
            width: 120px;
            height: 6px;
            background-color: #ededed;
            border-radius: 3px;
          }
        }

        /* 弹出窗内容区 */
        .contentBox {
          width: 750px;
          height: 82%;

          .AudioIntroduction {
            width: 750px;
            height: 100%;
            padding: 0 48px;
            box-sizing: border-box;

            span {
              width: 100%;
              display: inline-block;
              text-align: center;
              font-size: 36px;
              color: #323232;
              font-weight: Bold;
            }

            .contentWord {
              font-size: 30px;
              color: #323232;
              margin-top: 44px;
              line-height: 44px;
              height: 90%;
            }

            .scroll {
              margin-top: 117px !important;
              overflow: auto;
              scrollbar-width: none;
              &::-webkit-scrollbar{width:0;}
            }
          }
        }

        //简介
        .scroll {
          height: 90% !important;
          padding: 0 25px 100px;
          box-sizing: border-box;
          overflow: auto;
          scrollbar-width: none;
          &::-webkit-scrollbar{width:0;}
        }

        .scrollItem {
          height: 90% !important;
          box-sizing: border-box;
          overflow: auto;
          scrollbar-width: none;
          &::-webkit-scrollbar{width:0;}
        }

        /* 收起按钮 */
        .cancleBtn {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 116px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 32px;
          color: #323232;
          text-align: center;
          border-top: 2px solid rgb(231, 231, 231);
          box-sizing: border-box;
          background-color: #fff;
        }
      }
    }
  }

  // 弹出窗效果
  @keyframes bounce-in {
    0% {
      transform: translateY(100%);
    }

    100% {
      transform: translateY(0%);
    }
  }

  .fade-enter-active {
    transform-origin: left center;
    animation: bounce-in 0.5s;
  }

  .fade-leave-active {
    transform-origin: left center;
    animation: bounce-in 0.5s reverse;
  }

  /* 当前播放列表 */
  .CurrentPlayList {
    width: 750px;
    height: 100%;
  }

  .CurrentPlayListTop {
    padding-top: 10px;
  }

  .ListeningRecord {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    border-bottom: 2px solid #f2f2f2;
    padding: 0 26px;
    box-sizing: border-box;
  }

  /* 历史列表 推荐歌单 我的收藏  */
  .historyBtnWrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .ListeningRecordLeft,
  .listenText {
    font-size: 24px;
    color: #a8acbb;
  }

  .listenText image {
    width: 60px;
    height: 60px;
  }

  /* 全选按钮 */
  .multipleCheckBox {
    display: flex;
    align-items: center;
  }

  .multipleCheckBox text {
    color: #323232;
    font-size: 30px;
  }

  /* 标题 */
  .ListeningRecordTitle {
    width: 100%;
    position: absolute;
    top: 0;
    text-align: center;
  }

  .historyBtnWrapRight {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: absolute;
    right: 26px;
    top: 0;
  }

  .ListeningRecordRight {
    display: flex;
    align-items: center;
    margin-left: 20px;
  }

  .listenIcon,
  .listenIcon {
    margin-right: 11px;
  }

  .listenIcon,
  .listenIcon image {
    width: 24px;
    height: 23px;
  }

  /* 歌曲列表 */
  .musicList {
    width: 100%;
    height: 100%;
    position: relative;
    /deep/ ._v-container{
      left: 50%;
      transform: translateX(-50%);
      overflow: auto;
      scrollbar-width: none;
      &::-webkit-scrollbar{width:0;}
      ._v-content{
        padding-bottom: 80px;
      }
    }
  }

  .musicItem {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* margin-bottom: 32px; */
    padding: 10px 24px;
    box-sizing: border-box;
  }

  /* 选择框 */
  .selectBox {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #a8acbb;
    margin-right: 24px;
    position: relative;
    overflow: v-show;
  }

  .selectBox image {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .musicItemBox {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .musicItem .musicItemLeft,
  .musicItem .musicItemRight {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .musicImg {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    overflow: v-show;
    margin-right: 24px;
  }

  .musicImg image {
    width: 100%;
    height: 100%;
  }

  .musicTitle {
    display: flex;
    flex-direction: column;
  }

  .musicTitleTop {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .musicTitleBottom {
    font-size: 20px;
    color: #a8acbb;
    margin-top: 16px;
  }

  .musicTitle .musicText {
    font-size: 32px;
    color: #323232;
    margin-right: 11px;
  }

  .musicTitle .lookText {
    color: #f5b7a9;
    font-size: 24px;
    border-radius: 4px;
    width: 48px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #f5b7a9;
  }

  /* 右边 */
  .musicItemRight {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .musicItemRight .listenText {
    font-size: 32px;
    text-align: center;
    width: 60px;
    line-height: 60px;
    border-radius: 50%;
    border: 2px solid #f5b7a9;
    color: #f5b7a9;
  }

  /* 历史列表 推荐歌单 我的收藏  */
  .listContent {
    font-size: 30px;
    color: #323232;
    margin-top: 25px;
    line-height: 44px;
    height: 90%;
    position: relative;
  }

  .listContent swiper {
    width: 100%;
    height: 100%;
  }

  .listContent mt-swipe-item {
    width: 100%;
    height: 90%;
  }

  .listContent .rowBox {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    height: 23px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .rowBox div {
    display: flex;
    align-items: center;
  }

  .rowBox img {
    width: 24px;
    height: 24px;
  }

  .rowBox span {
    font-size: 24px;
    color: #a8acbb;
    margin-left: 14px;
  }

  .rowBox div:last-child span {
    margin-right: 14px;
  }

  /* 当前播放的音乐 */
  .currentMusic {
    background-color: #f2f2f2;
  }

  /* 音乐播放器 */
  .musicPlayer {
    width: 100%;
    height: 266px;
    position: relative;
  }

  /* 中线 */
  .lineBox {
    width: 4px;
    height: 100px;
    position: absolute;
    top: 37px;
    left: 50%;
    /* margin-left: -4px; */
    transform: translateX(-50%);
  }

  /* 滑动 */
  .sliding {
    width: 345px;
    height: 29px;
    position: absolute;
    top: 37px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* 放大镜 */
  .magnifuer {
    width: 136px;
    height: 60px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  /* 播放背景文字 */
  .playbgText {
    width: 136px;
    height: 60px;
    overflow: hidden;
    position: relative;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);

    img {
      max-width: 1211px;
      max-height: 1211px;
      width: 1211px;
      height: 1211px;
      position: absolute;
      z-index: 1;
      /* right: -500.5px; */
      /* left: -520.5px; */
      left: -538px;
      top: -29px;
      margin: 0 auto;
      display: block;
    }
  }

  /* 进度条 */
  .progressBar {
    width: 100%;
    height: 32px;
    margin: 40px 0;
    padding: 0 32px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }

  /* 正在播放状态 */
  .playBtn,
  .playBtn img {
    width: 32px;
    height: 32px;
  }

  /* 进度条 */
  .progressBarLine {
    width: 506px;
    height: 100%;
    margin: 0 16px;
    position: relative;
    /* background: url(https://youyang-cdn.mdshuzhi.com/upload/pic_kedu_n.png) no-repeat center center; */
    background-size: 100%;
  }

  .progressBarLine slider {
    opacity: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  .progressBarLine .current {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    width: 0%;
  }

  .progressBarLine .current span {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    height: 100%;
    margin: auto;
    background: linear-gradient(45deg,
        rgba(246, 80, 80, 1),
        rgba(240, 116, 96, 1));
  }

  .progressBarLine img {
    width: 100%;
    height: 100%;
  }

  /* 音乐时间 */
  .musicTime {
    font-size: 20px;
    color: #333333;
  }

  /* 歌词 */
  .lyric {
    width: 750px;
    height: 50vh;
    border-top: 2px solid #eeeeee;
  }

  .lyricEmpty {
    height: 180px;
    width: 100%;
  }

  .lyricBox {
    width: 100%;
    height: 100%;
    overflow: v-show;
    position: relative;
    transition: all 0.5s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .lyricWrap {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    text-align: center;
    overflow: auto;
    scrollbar-width: none;
    &::-webkit-scrollbar{width:0;}
  }

  .lyricWrap .item {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 56px;
    font-size: 28px;
    font-weight: 400;
    color: #333333;
  }

  /*.lyricWrap .item:first-child{
    margin-top:180px;
}*/
  .lyricWrap .item.current {
    color: #e66d4d;
    /* font-size: 1.2em; */
    font-weight: 700;
  }

  .lyricBox:before,
  .lyricBox:after {
    content: "";
    width: 100%;
    height: 30px;
    display: inline-block;
    left: 0;
    right: 0;
    position: absolute;
    z-index: 10;
    margin: auto;
  }

  .lyricBox:before {
    top: 0;
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 1),
        rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(rgba(255, 255, 255, 1),
        rgba(255, 255, 255, 0));
    background-image: linear-gradient(rgba(255, 255, 255, 1),
        rgba(255, 255, 255, 0));
  }

  .lyricBox:after {
    bottom: 0;
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 1));
    background-image: -o-linear-gradient(rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 1));
    background-image: linear-gradient(rgba(255, 255, 255, 0),
        rgba(255, 255, 255, 1));
  }

  .lyricBox .line {
    width: 90%;
    height: 30px;
    line-height: 30px;
    display: inline-block;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 20px;
  }

  .lyricBox .line:after {
    content: "";
    width: 70%;
    height: 0;
    display: inline-block;
    left: 0;
    right: 10%;
    top: 0;
    bottom: 0;
    border-bottom: rgba(0, 0, 0, 0.2) 1px solid;
    position: absolute;
    z-index: 10;
    margin: auto;
  }

  .lyricBox .orange {
    color: #e66d4d;
  }

  .lyricWrap div {
    width: 100%;
    line-height: 100px;
    font-size: 28px;
    color: #333333;
    text-align: center;
  }

  .musicPlayer {
    width: 100%;
    height: 260px;
    overflow: v-show;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 100px;
    z-index: 10;

    &:after {
      content: '';
      width: 100%;
      height: 130px;
      position: absolute;
      bottom: -110px;
      left: 0;
      background-color: #FFFFFF;
      z-index: 150;
    }
  }

  .musicPlayer mt-swipe {
    width: 100%;
    height: 100%;
  }

  .musicPlayer .playbg {
    max-width: 1211px;
    max-height: 1211px;
    width: 1211px;
    height: 1211px;
    position: absolute;
    z-index: -2;
    left: -230.5px;
    right: -230.5px;
    /* right: -255.5px; */
    top: -30px;
    margin: 0 auto;
    display: block;
  }

  .musicPlayer .control {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    color: #4d443f;
    padding: 0 5%;
    font-size: 20px;
    top: 110px;
    z-index: 99;
    position: absolute;
    left: 50%;
    width: 100%;
    min-width: 640px;
    max-width: 960px;
    box-sizing: border-box;
    /* width: 750px; */
    /* margin-left: -410px; */
    transform: translateX(-50%);
  }

  .musicPlayer .mode {
    text-align: center;
    width: 120px;
    float: left;
    text-align: center;
  }

  .musicPlayer .middle {
    float: left;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    /* width: 290px; */
    width: 38.67%;
  }

  .musicPlayer .play {
    width: 130px;
    height: 130px;
  }

  .musicPlayer .mode img {
    width: 38px;
    height: 38px;
  }

  .musicPlayer .prev,
  .musicPlayer .next {
    width: 32px;
    height: 32px;
  }

  .musicPlayer .settime {
    width: 120px;
    text-align: center;
    float: left;
    position: relative;
  }

  .settime .time {
    padding: 0 8px;
    height: 24px;
    line-height: 24px;
    background: rgba(255, 255, 255, 1);
    border-radius: 12px 12px 12px 2px;
    font-size: 16px;
    color: #323232;
    position: absolute;
    z-index: 1;
    top: -10px;
    right: -20px;
  }

  .musicPlayer .settime img {
    width: 38px;
    height: 38px;
  }

  .musicPlayer .lit {
    text-align: center;
    width: 750px;
    height: 750px;
    position: absolute;
    z-index: 10;
    box-sizing: border-box;
    top: -15px;
    left: 0;
    right: 0;
    margin: auto;
  }

  .musicPlayer .lit .swiper {
    width: 90%;
    height: 90%;
    display: block;
    position: absolute;
    z-index: 10;
    box-sizing: border-box;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    transform-origin: center 80%;
    transition: all 0.4s ease;
  }

  .musicPlayer .lit .item {
    height: 180px;
    width: 100%;
    display: flex;
    text-align: center;
    color: #000;
    font-size: 24px;
    align-items: center;
    justify-content: center;
    // position: absolute;
    z-index: 1;
    margin: auto;
    /*transition: all 0.1s ease;*/
    // transform: translateY(50%);
  }

  .musicPlayer .lit .active {
    transform: translateY(0px);
  }

  .musicPlayer .lit .item0 {
    left: 20px;
    top: 40px;
    transform: rotate(-30deg);
  }

  .musicPlayer .lit .item1 {
    top: 0;
    left: 0;
    right: 0;
    transform: rotate(0deg);
  }

  .musicPlayer .lit .item2 {
    right: 20px;
    top: 40px;
    transform: rotate(30deg);
  }

  .musicPlayer .lit .item3 {
    top: 0;
    bottom: 0;
    transform: rotate(90deg);
  }

  .menu-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 80%;
    height: 80%;
    margin: auto;
  }

  .menu-item {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    font-weight: 500;
  }

  .menu-circle-item {
    -webkit-transform-origin: 50% 550px;
    transform-origin: 50% 550px;
    margin: 0 auto;
    margin-top: 15px;
    position: relative;
    height: 50px;
    width: 50px;
    background-color: #77c2fc;
    text-align: center;
    border-radius: 50%;
  }

  .image-style {
    height: 25px;
    width: 25px;
    color: #f00;
    margin: 12.5px auto;
  }

  .text-style {
    margin: 5px auto;
    font-size: 15px;
  }

  /***/

  .menu-circle-text-item {
    transition: all 0.4s ease;
    -webkit-transform-origin: 50% 600px;
    transform-origin: 50% 600px;
    margin: 0 auto;
    position: relative;
    height: 25px;
    width: auto;
    text-align: center;
  }

  /* 分享按钮 */
  .ListeningRecordRight {
    position: relative;
    overflow: v-show;
  }

  .ListeningRecordRight .shareBtn {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
  }

  .ListeningRecordRight .shareBtn:after {
    border: none;
  }

  .playerSwiperItem {
    display: flex;
  }

  .ListeningRecord img,
  .selectBox img {
    display: block;
  }






  .mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: rgba(0, 0, 0, 0.4);
  }

  .packerDialog {
    width: 100%;
    min-width: 640px;
    max-width: 960px;
    max-height: 80%;
    background: #FFF;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    z-index: 9999;
    // animation-name: DialogfadeInUp;
    // animation-duration: .3s;
    // animation-fill-mode: both;
    color: #323232;
    font-size: 32px;
  }

  .packerDialog .content {
    padding: 0 32px;
  }

  .packerDialog .content .item {
    line-height: 105px;
    position: relative;
    border-bottom: 1px solid #F2F2F2;
  }

  .packerDialog .content .item:last-child {
    border-bottom: none;
  }

  .packerDialog .content .check {
    width: 28px;
    height: 28px;
    background: #FFFFFF;
    border: 1px solid #999999;
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: all 0.4s ease;
  }

  .packerDialog .content .time {
    color: #E66D4D;
    font-size: 28px;
    right: 60px;
    top: 0;
    bottom: 0;
    position: absolute;
    opacity: 0;
    transition: all 0.4s ease;
  }

  .packerDialog .content .item.on .check {
    border-color: #E66D4D;
  }

  .packerDialog .content .item.on .check:after {
    content: "";
    display: inline-block;
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    background-color: #E66D4D;
    border-radius: 50%;
    margin: auto;
  }

  .packerDialog .content .item.on .time {
    opacity: 1;
  }

  .packerDialog .btn {
    height: 116px;
    line-height: 116px;
    width: 100%;
    border-top: 1px solid #F2F2F2;
    font-weight: 700;
    text-align: center;
  }

  .el-slider.is-vertical {
    z-index: 10;
  }

  .voice_box,
  .speed_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 50px;
    white-space: nowrap;

    .font {
      font-size: 20px;
      font-weight: 400;
      margin: 30px 0 10px 0;
      line-height: 40px;
      color: rgba(50, 50, 50, 0.5);
    }

    img {
      width: 24px;
      height: 24px;
      display: block;
      margin-bottom: 10px;
    }
  }
   .voice_box{
    margin-top: 40px;
  }

  .voice_box .el-slider /deep/.el-slider__runway,
  .speed_box .el-slider /deep/.el-slider__runway {
    background-color: rgba(204, 204, 204, 0.5);
    width: 2px;
    border-radius: 1px;
  }

  .voice_box .el-slider /deep/.el-slider__bar,
  .speed_box .el-slider /deep/.el-slider__bar {
    width: 2px;
    background: rgba(230, 109, 77, 0.4);
    border-radius: 1px;
  }

  .voice_box .el-slider /deep/.el-slider__button-wrapper,
  .speed_box .el-slider /deep/.el-slider__button-wrapper {
    min-width: 12px;
    width: 12px;
    height: 12px;
    left: calc(50% - 7px);
  }

  .voice_box .el-slider /deep/.el-slider__button,
  .speed_box .el-slider /deep/.el-slider__button {
    min-width: 12px;
    width: 12px;
    height: 12px;
    background: #E66D4D;
    border-radius: 50%;
    border-color: #BABABA;
    transform: scale(1.2);
  }

  .speed_box .el-slider /deep/.el-slider__button {
    min-width: 12px;
    width: 12px;
    height: 12px;
    background: #E66D4D;
    border-radius: 50%;
    border: none;
  }

  .speed_box .el-slider /deep/.el-slider__stop {
    min-width: 6px;
    width: 6px;
    height: 6px;
    min-width: 6px;
    border-radius: 50%;
    background: #BABABA;
  }


</style>
<style>
  .speedTooltip {
    width: 63px;
    height: 28px;
    background-image: url("../../../static/images/speed_box.png") !important;
    background-size: 100% 100% !important;
    background-position: 0 0 !important;
    background: RGBA(153, 153, 153, 1) !important;
    color: #FFF !important;
    font-size: 20px !important;
    left: 0;
    top: 0;
    text-align: center;
  }
  /* .v-modal{
    width: 100%;
    min-width: 640px;
    max-width: 960px;
    margin: 0 auto;
    left: 50%;
    transform: translateX(-50%);
  } */

</style>
